<template>
	<view class="container" :style="{ 'background':'#f5f7fa'}">
		<shopro-navbar :isBack="true" :background="{'background':'#f5f7fa'}">
			<text
				slot="content"
				class="u-flex u-flex-center u-flex-items-center"
				style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;"
			>
				账号注销
			</text>
		</shopro-navbar>
		<!-- 注销说明 -->
		<view class="section">
			<text class="section-title">账号注销申请</text>
			<view class="desc-box">
				<text class="desc-main">账号注销后，您将永久放弃（且无法恢复）以下重大权利和资产：</text>
				<view class="desc-list">
					<text>1. 账号信息、用户权益和账号内各类虚拟资产；</text>
					<text>2. 通过该账号原绑定的手机号或者邮箱信息等登录我们的产品并享受服务；</text>
				</view>
			</view>
			<view class="radio-box">
				<u-checkbox-group
					v-model="checked"
					placement="column"
					@change="checkboxChange"
				>
					<u-checkbox
						:customStyle="{marginBottom: '8px'}"
						shape="circle"
						:label="'申请注销表示您自愿放弃账号内全部资产、权益、数据记录'"
					>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
		</view>
		<!-- 保存按钮 -->
		<view class="save-btn-wrap">
			<view class="save-btn u-flex u-flex-center u-flex-items-center" @click="!checked?'':submitCancel" >申请注销</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false
		};
	},
	methods: {
		submitCancel() {
			if (this.checked) {
				uni.showToast({
					title: '已提交注销申请',
					icon: 'success'
				});
			}
		},
		checkboxChange(){
			this.checked = !this.checked;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f7f8fa;
	padding: 0 24rpx;
}
.nav-bar {
	display: flex;
	align-items: center;
	height: 100rpx;
	background: #fff;
	border-radius: 0 0 24rpx 24rpx;
	margin-bottom: 24rpx;
}
.back-icon {
	font-size: 40rpx;
	margin-right: 24rpx;
	color: #333;
}
.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #222;
}
.section {
	background: #f7f8fa;
	border-radius: 24rpx;
	padding: 32rpx 24rpx;
	margin-bottom: 40rpx;
}
.section-title {
	color: #2176ff;
	font-weight: bold;
	font-size: 30rpx;
	margin-bottom: 8rpx;
	position: relative;
	padding: 0 30rpx;
	&::after{
		content: "";
		position: absolute;
		left: 0;
		width: 6rpx;
		height: 80%;
		background: #2176ff;
		margin-top: 5rpx;
	}
}
.desc-box {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-top: 30rpx;
	margin-bottom: 24rpx;
}
.desc-main {
	color: #8088A2;
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 16rpx;
	display: block;
}
.desc-list {
	color: #8088A2;
	font-size: 26rpx;
	margin-left: 16rpx;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}
.radio-box {
	display: flex;
	align-items: flex-start;
	margin-top: 16rpx;
}
.radio-label {
	color: #999;
	font-size: 26rpx;
	margin-left: 16rpx;
	line-height: 36rpx;
}
.save-btn-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 24rpx;
	padding: 0 32rpx;
	z-index: 10;
	.save-btn{
		width: 95%;
		margin: 0 auto;
		height: 80rpx;
		border-radius: 34rpx;
		background: #1664FF;
		box-shadow: 0px 2px 4px 0px rgba(22,100,255,0.5);
		color: #fff;
	}
}
::v-deep .u-checkbox-label--left>text{
	color: #606266;
	font-size: 15px;
	display: inline-block;
	width: 80vw;
	line-height: 42rpx!important;
	color: #999!important;
}
</style>
